<template>
  <view class="page-wrapper" :data-theme="theme">
    <text class="user-header">
      个人中心
    </text>
    <view class="menu-list flex justify-between item-center">
      <view class="my-20">切换主题</view>
      <view class="">
        黑夜 <switch :checked="theme === 'light'" @change="changeHandler" />白天
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "User",
    data() {
      return {
        
      }
    },
    methods: {
      changeHandler(e) {
        this.$store.dispatch('changeTheme', e.detail.value ? 'light' : 'dark')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrapper {
    padding: 40rpx;
  }
  .user-header {
    padding-top: 20rpx;
    text-align: left;
    font-size: 40rpx;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 40rpx;
  }
  .menu-list {
    width: 90vw;
    margin: 0 auto;
    margin-top: 40rpx;
  }
</style>